<template>
	<view class="map-box">
		<view class="top-buttons" v-if="props.TripInfoData.length > 0">
			<scroll-view scroll-x="true" class="scroll-view">
				<view class="day-buttons">
					<text :class="{'text-active': selectedCityIndex === -1}" @tap="moveToDay(-1)">概览</text>
					<block v-for="(item, index) in props.TripInfoData" :key="item.scenic_id">
						<text :class="{'text-active': selectedCityIndex === index}" @tap="moveToDay(index)">
							{{ item.scenic_name }}
						</text>
					</block>
				</view>
			</scroll-view>
		</view>
		<map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" :polyline="polyline"
			:markers="markers"></map>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue';

	// 引入并初始化腾讯地图 SDK
	const QQMapWX = require('../libs/qqmap-wx-jssdk.js');
	const qqmapsdk = new QQMapWX({
		key: '6QGBZ-QMOLZ-6UXXP-75KGX-F3UG7-DSBHR'
	});

	const props = defineProps({
		TripInfoData: {
			type: Array,
			default: () => [],
		}
	});

	const selectedCityIndex = ref(-1);
	const scale = ref(5);
	const polyline = ref([]);
	const longitude = ref(101);
	const latitude = ref(31.219);

	// 计算 markers
	const markers = computed(() => {
		if (!props.TripInfoData || !Array.isArray(props.TripInfoData)) return [];
		return props.TripInfoData.map(item => ({
			id: item.scenic_id,
			latitude: item.latitude,
			longitude: item.longitude,
			width: 15,
			height: 20,
			callout: {
				content: `${item.scenic_name}`,
				fontSize: 10,
				borderRadius: 10,
				padding: 6,
				display: 'ALWAYS'
			}
		}));
	});
	// 辅助函数：为所有景点之间规划路线
	const planAllRoutes = () => {
		polyline.value = []; // 清除现有的路线
		if (markers.value.length > 1) {
			for (let i = 0; i < markers.value.length - 1; i++) {
				planRoute(markers.value[i], markers.value[i + 1]);
			}
		}
	};

	// 路线规划函数
	const planRoute = (from, to) => {
		qqmapsdk.direction({
			mode: 'driving',
			from: {
				latitude: from.latitude,
				longitude: from.longitude
			},
			to: {
				latitude: to.latitude,
				longitude: to.longitude
			},
			success: (res) => {
				const route = res.result.routes[0].polyline;
				const points = [];
				let kr = 1000000;
				for (let i = 2; i < route.length; i++) {
					route[i] = Number(route[i - 2]) + Number(route[i]) / kr;
				}

				for (let i = 0; i < route.length; i += 2) {
					points.push({
						latitude: route[i],
						longitude: route[i + 1]
					});
				}

				polyline.value.push({
					points: points,
					color: '#00aaffdd', // 设置路线颜色
					width: 4
				});
			},
			fail: (error) => {
				console.error("路线规划失败", error);
			}
		});
	};

	// 切换到指定的景点并重新规划路线
	// 切换到指定的景点并重新规划路线
	// 切换到指定的景点并重新规划路线
	const moveToDay = (index) => {
		if (index === -1) {
			selectedCityIndex.value = -1;
			longitude.value = 101; // 恢复默认经度
			latitude.value = 31.219; // 恢复默认纬度
			scale.value = 5; // 恢复默认缩放级别

			// 重新规划所有路线
			planAllRoutes();
		} else {
			const marker = markers.value[index];
			if (marker) {
				selectedCityIndex.value = index;
				longitude.value = marker.longitude;
				latitude.value = marker.latitude;
				scale.value = 7;

				// 清除现有路线并重新规划从当前点到下一个点的路线
				polyline.value = [];
				if (index < markers.value.length - 1) {
					planRoute(marker, markers.value[index + 1]);
				}
			}
		}
	};

	onMounted(() => {
		// 监听 TripInfoData 变化并在数据加载完成后规划路线
		watch(() => props.TripInfoData, (newVal) => {
			// 添加成都作为起点
			const chengdu = {
				scenic_id: 0, // 起点的 ID
				scenic_name: '出发地', // 起点的名称
				latitude: 30.658601, // 成都的纬度
				longitude: 104.064762, // 成都的经度
				scenic_decr: '起点：成都' ,// 起点的描述
				scenic_img:'/applet/static/1734788327.png'//起点的图片TODO
			};
			props.TripInfoData.unshift(chengdu); // 将成都插入到数组的开头
			if (newVal && newVal.length > 1) {
				for (let i = 0; i < markers.value.length - 1; i++) {
					planRoute(markers.value[i], markers.value[i + 1]);
				}
			}
		}, {
			immediate: true
		});
	});
</script>

<style lang="scss" scoped>
	.map-box {
		width: 100%;
		height: 640rpx;
		position: relative;

		.top-buttons {
			width: 100%;
			position: absolute;
			top: 1vh;
			left: 0;
			z-index: 1;

			.scroll-view {
				display: flex;
				white-space: nowrap;
				width: 100%;
				padding: 0 20rpx;
				overflow: hidden;
				box-sizing: border-box;

				.day-buttons {
					display: flex;
					gap: 10px;

					text {
						padding: 8px;
						font-size: 26rpx;
						text-align: center;
						border-radius: 5px;
						background-color: #fff;
					}

					.text-active {
						background-color: #000;
						color: white;
					}
				}
			}
		}

		.map {
			width: 100%;
			height: 640rpx;
		}

		.description-box {
			width: 100%;
			height: 300rpx;
			position: fixed;
			bottom: 60rpx;
		}
	}
</style>